<template>
  <div class="main">
    <div class="nav-top">
      <router-link :to="{ name: 'My' }">
        <icon name="arrow-left" size="2rem" />
      </router-link>
      <icon name="ellipsis" size="2rem" />
    </div>
    <div class="account">
      <img
        src="https://images.chinatimes.com/newsphoto/2020-10-15/656/20201015002375.jpg"
        alt=""
      />
      <h2>明日花绮罗</h2>
    </div>
    <div class="brief">
      <label>
        <input type="text" placeholder="添加个人简介，让大家更好地认识你" />
        <icon name="edit" size="1.4rem" color="#666" />
      </label>
    </div>
    <div class="datum">
      <div class="sum">
        <h3>0</h3>
        <p>粉丝</p>
      </div>
      <div class="sum">
        <h3>0</h3>
        <p>粉丝</p>
      </div>
      <icon name="more-o" size="1.4rem" color="#999" />
      <div class="data">编辑资料</div>
    </div>
    <div class="content">
      <tabs v-model:active="active">
        <tab title="动态" title-style="font-weight:800; font-size:20px">
          <div class="anything">
            <img
              src="https://images.chinatimes.com/newsphoto/2020-10-15/656/20201015002375.jpg"
              alt=""
            />
            <div>还没有做笔记哦，赶快来记录你的美好瞬间吧</div>
          </div>
        </tab>
        <tab title="笔记" title-style="font-weight:800; font-size:20px">
          <div class="anything">
            <img
              src="http://www.bizhishe.com/d/file/2022-02-08/b3dddbd35251978bf0db6b33de9bfd32.jpg"
              alt=""
            />
            <div>还没有做笔记哦，赶快来记录你的美好瞬间吧</div>
          </div>
        </tab>
      </tabs>
    </div>
  </div>
</template>

<script setup>
import { Icon, Tab, Tabs } from 'vant'
</script>

<style scoped>
.main {
  width: 90%;
  margin: auto;
}

.nav-top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 20px auto;
}

.account {
  display: flex;
  align-items: center;
  gap: 24px;
}

.account img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 4px solid #999;
}

.brief {
  height: 2rem;
  margin: 20px 0;
}
.brief label {
  width: 80%;
  display: flex;
  align-items: center;
  height: 26px;
}
.brief label input {
  border: none;
  width: 90%;
  height: 100%;
  font-size: 16px;
}

.datum {
  display: flex;
  align-items: center;
  gap: 18px;
}

.sum {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sum p {
  color: #999;
}

.data {
  width: 60%;
  height: 43px;
  line-height: 43px;
  text-align: center;
  border: 1px solid #999;
  border-radius: 20px;
}

.anything {
  display: flex;
  width: 100%;
  height: 52vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.anything img {
  width: 60vw;
  height: 20vh;
  margin: 0 auto;
  margin-top: -100px;
}

.anything div {
  width: 80%;
  margin: 20px auto;
  height: 50px;
  line-height: 50px;
  border: 1px solid orange;
  text-align: center;
  color: orange;
  border-radius: 30px;
}
</style>
